<template>
  <div class="tinymce-box">
    <editor
      :id="id"
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @on-click="onClick"
    />
  </div>
</template>

<script>
import _ from 'lodash';
import tinymce from 'tinymce/tinymce'; //tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver';
import 'tinymce/icons/default/icons'; //解决了icons.js 报错Unexpected token '<'
import '@public/static/tinymce/langs/zh_CN.js';
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image';// 插入上传图片插件
import 'tinymce/plugins/media';// 插入视频插件
import 'tinymce/plugins/table';// 插入表格插件
import 'tinymce/plugins/lists';// 列表插件
import 'tinymce/plugins/wordcount';// 字数统计插件
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/link';
import {uploadImg} from "../../api/file";
import {toast} from "../../utils";
/**
 * 富文本
 * @author maolin
 */
export default {
  name:'Tinymce',
  components:{
    Editor
  },
  props: {
    /**
     * 默认值
     * @public
     */
    value: {
      type: String,
      default: ''
    },
    /**
     * 是否禁用
     * @public
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 插件
     * @public
     */
    plugins: {
      type: [String, Array],
      default: 'lists image media table wordcount fullscreen preview link'
    },
    /**
     * 工具栏
     * @public
     */
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  fullscreen preview |  formatselect | fontselect | fontsizeselect | bold italic forecolor backcolor lineheight link | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table | removeformat'
    }
  },
  data(){
    return{
      id: _.uniqueId('myTinymceId'),
      init: {
        language_url: `${process.env.BASE_URL}static/tinymce/langs/zh_CN.js`,
        language: 'zh_CN',
        // skin_url: '/tinymce/skins/ui/oxide',
        skin_url: `${process.env.BASE_URL}static/tinymce/skins/ui/oxide`,
        // skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
        height: 300,
        content_style: "img {max-width:100%;}",
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
        font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          let formdata = new FormData();
          formdata.append('file', blobInfo.blob(), blobInfo.filename());
          uploadImg(formdata)
            .then(res => {
              let img = res.data.path;
              success(img);
            })
            .catch(() => {
              failure('Error');
            });
        },
      },
      myValue: this.value
    };
  },
  watch: {
    value (newValue, oldValue) {
      if (newValue === null) {
        newValue = "";
      }
      this.myValue = newValue;

    },
    myValue (newValue) {
      this.$emit('input', newValue);
    }
  },
  mounted () {
    this.initEditor();
  },
  methods: {
    /**
     * 初始化编辑器
     * @public
     */
    initEditor () {
      this.$nextTick(() => {
        tinymce.init({
          selector: '#' + this.id,
        });
      });

    },

    /**
     * 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
     * 需要什么事件可以自己增加
     * @public
     */
    onClick (e) {
      this.$emit('on-click', e, tinymce);
    },
    /**
     * 可以添加一些自己的自定义事件，如清空内容
     * @public
     */
    clear () {
      this.myValue = '';
    }
  }
};

</script>
<style scoped>

</style>
